<template>
    <Tubiao style="width: 600px;height:400px" :option="option"></Tubiao>

    <div>
        <el-table :data="tableData" style="width: 1200px;margin-top:20px">
            <el-table-column type="index" width="55" label="序号" />
            <el-table-column prop="contractTopic" label="合同名称" />
            <el-table-column prop="sCcontractNumber" label="合同编号" />
            <el-table-column prop="scNum" label="数量合计" />
            <el-table-column prop="preferentialPrice" label="销售总额" />
            <el-table-column prop="scTax" label="税额">
                <template v-slot="scoped">{{ scoped.row.scTax + "%" }}</template>
            </el-table-column>
            <el-table-column prop="clientName" label="客户名称" />
            <el-table-column prop="scSalespeople" label="销售人员" />
            <el-table-column prop="proNum" label="发货数量">
                <template v-slot="scoped">{{ scoped.row.proNum + "件" }}</template>
            </el-table-column>
            <el-table-column prop="scShipmentState" label="发货状态">
                <template v-slot="scoped">
                    <span v-if="scoped.row.scShipmentState == 1">未发货</span>
                    <span v-if="scoped.row.scShipmentState == 2">已发货</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import "echarts"
import Tubiao from 'vue-echarts'
import axios from 'axios';
import http from '../http';
import { watch } from 'fs';

const Tone = ref([])
const Ttwo = ref([])
//显示客户分类
const Client = ref([])
const ClientAllShow = () => {
    axios.get(http.zblnb + "/vendor/api/Client/ClientAllShowTubiao")
        .then(res => {
            Client.value = res.data.data
            console.log(Client.value)
            Client.value.forEach((item: any) => {
                Tone.value.push(item.cName)
                Ttwo.value.push(item.cNum)
            })
        })
}


// 指定图表的配置项和数据
const option = {
    title: {
        text: '客户分类统计'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: Tone.value
    },
    yAxis: {},
    series: [
        {
            name: '客户分类',
            type: 'bar',
            data: Ttwo.value
        }
    ]
};


const tableData = ref([])
const GetList = () => {
    axios.get(http.zblnb + "/cw/api/SaleContract/GetSaleProfitList", {
        params: {
            pageIndex: 1,
            pageSize: 50
        }
    }).then(res => {
        console.log(res.data.data.list)
        tableData.value = res.data.data.list
    })
}

onMounted(() => {
    ClientAllShow();
    GetList()
})
</script>

<style></style>